<script setup lang="ts">
  import { useSystemStore } from '@/store';
  import { onMounted } from 'vue';
  import SalesPicker from '@/components/sales-picker/index.vue';

  const systemStore = useSystemStore();

  onMounted(() => {
    systemStore.getSettings();
  });
</script>

<template>
  <div class="container">
    <breadcrumb :items="['menu.system.management', 'menu.system.setting']" />
    <a-card>
      <a-form :model="{}" auto-label-width>
        <a-form-item :label="setting.label" class="form-item" v-for="setting in systemStore.settings" :key="setting.id">
          <a-date-picker v-model="setting.value" v-if="setting.type === 'date'"></a-date-picker>
          <a-input v-model="setting.value" v-if="setting.type === 'text'"></a-input>
          <template v-if="setting.code === 'DefaultSalesman'">
            <sales-picker v-model="setting.value" />
          </template>
        </a-form-item>
      </a-form>
    </a-card>
    <div class="footer">
      <a-button type="primary" @click="systemStore.saveSettings()">保存</a-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .container {
    padding: 0 16px;
    position: relative;
    height: calc(100vh - 60px);

    .form-item:last-child {
      margin-bottom: 0;
    }

    .footer {
      display: flex;
      justify-content: flex-end;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 12px;
      background-color: #fff;
    }
  }
</style>
